<template>
  <div>
    <el-table
      ref="multipleTable"
      :data="$store.state.list"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>

      <el-table-column prop="name" label="姓名" width="120"> </el-table-column>
      <el-table-column prop="wish" label="心愿" show-overflow-tooltip>
      </el-table-column>
      <el-table-column label="时间">
        <template slot-scope="scope">
          {{ scope.row.time | filtime }}
        </template>
      </el-table-column>
      <el-table-column label="头像" width="120">
        <template slot-scope="scope">
          <img style="width: 50px; height: 50px" :src="scope.row.img" alt="" />
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="removeAll">批量删除</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectValue: [],
    };
  },
  methods: {
    handleSelectionChange(val) {
      console.log(val);
      this.selectValue = val;
    },
    //只要出发复选框就会得到选中的数据
    removeAll() {
      this.$store.commit("removeAll", this.selectValue);
    },
    //批量删除
  },
  created() {},
  mounted() {},
  components: {},
  computed: {},
  watch: {},
  filters: {
    // filtime(val) {
    //   let res = new Date(val);
    //   let year = res.getFullYear();
    //   let month = res.getMonth() + 1;
    //   let day = res.getDate();
    //   let hours = res.getHours();
    //   let mines = res.getMinutes();
    //   let second = res.getSeconds();
    //   let fmines = String(mines).padStart(2, "0");
    //   // string方法转化为字符串 padStart把这个字符串不够两位的用0补全两位
    //   return `${year}/${month}/${day} ${hours}:${fmines}`;
    // },
    //第一个参数是要过滤的值 必须有一个return值 返回的是过滤的结果
  },
};
</script>

<style lang="scss" scoped></style>
